<template>
	<view class="main">
		<u-navbar :is-back="true" title="订单详情" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="top">
			<text>完成订单</text>
			<view class="print" @click="orderinfo==2?receiptTest():router()">
				打印订单
			</view>
		</view>
		<view class="user">
			<view class="info">
				<view class="left">
					<view class="name">
						收货人：{{details.person}}	<text class="phone">{{details.phone}}</text>
					</view>
					<view class="address">
						{{details.province}}{{details.city}}{{details.district}}{{details.addr}}
					</view>
				</view>
			
			</view>
			<view class="call">
				<u-icon name="phone-fill" @click="contact(details.phone)"></u-icon>
			</view>
		</view>

		<view class="user user2"  v-if="qs.mobile!=null|| qs.qs!=null">
			<view class="info">
				<view class="left">
					<text class="name psy">
						配送员：{{qs.qs}}
					</text>
					<text class="phone">
						{{qs.mobile}}
					</text>
					<view class="time">
						与{{estimated}}送达
					</view>
				</view>
		<!-- 		<view class="phone">
					{{details.run[0].mobile}}
				</view> -->
			</view>
			<view class="call">
				<u-icon name="phone-fill" @click="contact(qs.mobile)"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="shop" v-for="(item,index) in details.good_info" :key="index">
				<image :src="item.image" mode=""></image>
				<view class="shop_r">
					<view class="shop_tit">
						{{item.name}}
					</view>
					<view class="status">
						{{item.specs}}
					</view>
					<view class="money">
						<text>¥{{item.price}}</text>
						<view>
							x{{item.amount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allmoney">
			<text>总额：¥{{details.union_pay_true}} 满减-¥{{details.minus}}</text>
			<view class="zong">
				小计：<text>¥{{smallmoney}}</text>
			</view>
		</view>
		<view class="pay">
			<view class="pay_one">
				<text class="tit">{{details.good_info.length}}种 {{num}}件商品 合计：</text>
				<text>¥{{smallmoney}}</text>
			</view>
			<view class="pay_one">
				<text class="tit">红包优惠：</text>
				<text>¥{{details.hb}}</text>
			</view>
			<view class="pay_one">
				<text class="tit">实付金额：</text>
				<text class="endmoney">¥{{details.pay_true}}</text>
			</view>
		</view>
		<view class="order">
			<view class="order_tit">
				订单信息
			</view>
			<view class="order_one">
				<text>订单编号:</text>
				<text class="ends">{{details.orderno}}</text>
			</view>
			<view class="order_one">
				<text>创建时间:</text>
				<text class="ends">{{ formatTime(details.create_time,'YYYY-MM-DD hh:mm:ss')}}</text>
			</view>
			<view class="order_one"  v-if="qs.mobile!=null|| qs.qs!=null">
				<text>配送时间:</text>
				<text class="ends">{{ formatTime(qs.create_time,'YYYY-MM-DD hh:mm:ss')}}</text>
			</view>
			<view class="order_one">
				<text>订单备注:</text>
				<text class="ends">{{details.remark}}</text>
			</view>
			<view class="order_one">
				<text>完成时间:</text>
				<text class="ends">{{ formatTime(qs.order_end_time,'YYYY-MM-DD hh:mm:ss')}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	var esc = require("../../../util/ble/esc.js");
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				details: '',
				smallmoney: '',
				num: 0,
				orderinfo:'',
				estimated:'',
				
				
				looptime: 0,
				currentTime: 1,
				lastData: 0,
				oneTimeData: 0,
				returnResult: "",
				canvasWidth: 180,
				canvasHeight: 180,
				imageSrc: '../../static/img/abc_ic_star_black_16dp.png',
				buffSize: [],
				buffIndex: 0,
				printNum: [],
				printNumIndex: 0,
				printerNum: 1,
				currentPrint: 1,
				isReceiptSend: false,
				isLabelSend: false,
				qs:''
				
			}
		},
		onLoad(data) {
			this.details = JSON.parse(decodeURIComponent(data.details))
			console.log('上个页面传过来的值', this.details);
			this.qs=this.details.run[0]
			this.getnum()
			this.estimated =this.formatTime(this.details.run[0].create_time,"hh:mm");
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
		},
		mounted() {

		},
		computed: mapState(['sysinfo', 'Bluetooth']),
		onReady() {
			let list = []
			let numList = []
			let j = 0
			for (let i = 20; i < 200; i += 10) {
				list[j] = i;
				j++
			}
			for (let i = 1; i < 10; i++) {
				numList[i - 1] = i
			}
			this.buffSize = list;
			this.oneTimeData = list[0];
			this.printNum = numList;
			this.printerNum = numList[0];
		},
		onShow() {
			let that = this;
			let width;
			let height;
			uni.getImageInfo({
				src: that.imageSrc,
				success(res) {
					console.log(res.width)
					console.log(res.height)
					width = res.width
					height = res.height
					that.canvasWidth = res.width;
					that.canvasHeight = res.height;
				}
			})
			const ctx = uni.createCanvasContext("edit_area_canvas", this);
			// if (app.globalData.platform == "android") {
			//   ctx.translate(width, height)
			//   ctx.rotate(180 * Math.PI / 180)
			// }
			ctx.drawImage(this.imageSrc, 0, 0, width, height);
			ctx.draw();
		},
		onUnload() {
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
			// uni.closeBLEConnection({
			//      deviceId: BLEInformation.deviceId,
			//      success: function(res) {
			//        console.log("关闭蓝牙成功")
			//      },
			//    })	
		},
		methods: {
		
			//票据测试
			receiptTest() {
				var that = this;
				var canvasWidth = that.canvasWidth
				var canvasHeight = that.canvasHeight
				var command = esc.jpPrinter.createNew()
				command.init()
				// 标题
				command.bold(1); //加粗
				command.setFontSize(16); //字体大小
				command.setSelectJustification(1) //居中
				command.rowSpace(100);
				command.setText(uni.getStorageSync('userinfo').shop_info.name);
				command.setPrint();
				command.rowSpace(60);
		
				command.bold(0); //取消加粗
				command.setFontSize(0); //正常字体
				//时间
				command.setSelectJustification(0); //居左
				command.setText("时间：" + that.formatTime(that.details.create_time, 'YYYY-MM-DD hh:mm:ss'));
				command.setPrint();
				//时间
				command.setSelectJustification(0); //居左
				command.setText("配送时间：" + that.formatTime(that.details.run[0].create_time, 'YYYY-MM-DD hh:mm:ss'));
				command.setPrint();
				//时间
				command.setSelectJustification(0); //居左
				command.setText("完成时间：" + that.formatTime(that.details.run[0].order_end_time, 'YYYY-MM-DD hh:mm:ss'));
				command.setPrint();
				//编号
				command.setSelectJustification(0); //居左
				command.setText("编号：" + that.details.orderno);
				command.setPrintAndFeed(80); //打印并走纸feed个单位
				//列表
				command.rowSpace(50); //间距
				command.bold(5); //加粗
				
				for (let i = 0; i < this.details.good_info.length; i++) {
					command.setText("商品："+that.details.good_info[i].name);
					command.setPrint();
				}
				command.setPrint();
				command.setText("货号");
				command.setAbsolutePrintPosition(80);
				command.setText("规格");
				command.setAbsolutePrintPosition(160);
				command.setText("单价");
				command.setAbsolutePrintPosition(240);
				command.setText("数量");
				// command.setAbsolutePrintPosition(480);
				// command.setText("金额");
				command.setPrint()
				command.bold(0); //加粗
		
		
				// -------1
				for (let i = 0; i < that.details.good_info.length; i++) {
					command.setText(that.details.id);
					command.setAbsolutePrintPosition(80);
					command.setText(that.details.good_info[i].specs);
					command.setAbsolutePrintPosition(160);
					command.setText(that.details.good_info[i].price);
					command.setAbsolutePrintPosition(250);
					command.setText(that.details.good_info[i].amount);
					command.setPrint()
				}
		
				//合计
				command.bold(5); //加粗
				command.setAbsolutePrintPosition(220);
				command.setText("满减：" + that.details.minus);
				command.setPrint();
				command.setAbsolutePrintPosition(220);
				command.setText("红包：" + that.details.hb);
				command.setPrint();
				command.setAbsolutePrintPosition(100);
				command.setText("总数：" + that.num);
				command.setAbsolutePrintPosition(260);
				command.setText("合计：" + that.smallmoney);
				command.setPrint();
				command.setAbsolutePrintPosition(220);
				command.setText("实收：" + that.details.pay_true);
				command.setPrint();
		
		
				//提示
				command.rowSpace(80); //间距
				command.bold(2); //加粗
				command.setSelectJustification(1); //居中
				command.setText("感谢您对小店的认可，祝您用餐愉快，我们会继续努力！用餐过程中如有任何问题，您可随时联系我们。我们会第一时间为您服务，谢谢！");
				command.setPrint();
		
				//电话
				command.setSelectJustification(0); //居左
				command.setText("客服电话:" + uni.getStorageSync('userinfo').phone);
				command.setPrint();
				command.setText("联系地址:" + uni.getStorageSync('userinfo').shop_info.address);
				command.setPrint();
				command.setPrintAndFeedRow(3);
		
				that.isReceiptSend = true;
				that.prepareSend(command.getData());
		
		
			},
			//准备发送，根据每次发送字节数来处理分包数量
			prepareSend(buff) {
				console.log(buff);
				let that = this
				let time = that.oneTimeData
				let looptime = parseInt(buff.length / time);
				let lastData = parseInt(buff.length % time);
				console.log(looptime + "---" + lastData)
				this.looptime = looptime + 1;
				this.lastData = lastData;
				this.currentTime = 1;
				that.Send(buff)
			},
			//分包发送
			Send(buff) {
				let that = this
				let {
					currentTime,
					looptime: loopTime,
					lastData,
					oneTimeData: onTimeData,
					printerNum: printNum,
					currentPrint
				} = that;
				let buf;
				let dataView;
				if (currentTime < loopTime) {
					buf = new ArrayBuffer(onTimeData)
					dataView = new DataView(buf)
					for (var i = 0; i < onTimeData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				} else {
					buf = new ArrayBuffer(lastData)
					dataView = new DataView(buf)
					for (var i = 0; i < lastData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				}
				console.log("第" + currentTime + "次发送数据大小为：" + buf.byteLength)
				let {
					BLEInformation
				} = that.Bluetooth;
		
				uni.writeBLECharacteristicValue({
					deviceId: BLEInformation.deviceId,
					serviceId: BLEInformation.writeServiceId,
					characteristicId: BLEInformation.writeCharaterId,
					value: buf,
					success: function(res) {
						console.log(res)
					},
					fail: function(e) {
						console.log(e)
					},
					complete: function() {
						currentTime++
						if (currentTime <= loopTime) {
							that.currentTime = currentTime;
							that.Send(buff)
						} else {
							uni.showToast({
								title: '已打印第' + currentPrint + '张',
							})
							if (currentPrint == printNum) {
								that.looptime = 0;
								that.lastData = 0;
								that.currentTime = 1;
								that.isReceiptSend = false;
								that.isLabelSend = false;
								that.currentPrint = 1;
							} else {
								currentPrint++;
								that.currentPrint = currentPrint;
								that.currentTime = 1;
								that.Send(buff)
							}
						}
					}
				})
			},
			
			
			contact(phone) {
				console.log(phone);
				if (phone != null) {
					uni.makePhoneCall({
						// 手机号
						phoneNumber: phone,
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log(res);
							console.log('调用失败!')
						}
			
					});
				}
			},
			getnum() {
				if (this.details.minus == null) {
					this.details.minus == 0
				}
				this.smallmoney = this.details.union_pay_true - this.details.minus
				for (let i = 0; i < this.details.good_info.length; i++) {
					console.log(this.details.good_info[i].amount);
					this.num = this.num + this.details.good_info[i].amount
					console.log(this.num);
				}
			},
		router() {
			var that = this
			uni.navigateTo({
				url: '../orint/orint',
				events: {
					//自定义一个监听器名, data为选择页面返回的数据
					selectType(data) {
						console.log(data);
						that.orderinfo = data
						console.log('返回值', that.orderinfo);
					}
				}
			})
		},

		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.top {
				padding: 44rpx 24rpx 44rpx 41rpx;
				background-color: #E13C3D;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.print {
					padding: 12rpx 23rpx;
					background: #FF7200;
					border-radius: 26rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.user2 {
				margin: 10rpx 0;
			}

			.user {
				background-color: #fff;
				padding: 30rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info {
					// display: flex;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;

					.address {
						width: 90%;
						padding: 11rpx 0;
					}

					.psy {
						padding-right: 90rpx;
					}

					.time {
						font-size: 30rpx;
						font-weight: 400;
						color: #808080;
					}

					.phone {
						padding-left: 30rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #808080;
					}
				}

				.call {
					padding: 18rpx;
					background: #E6E6E6;
					border-radius: 50%;
				}
			}

			.content {
				background-color: #fff;
				padding: 25rpx 25rpx 0 25rpx;

				.shop {
					padding-bottom: 40rpx;
					display: flex;

					image {
						width: 160rpx;
						height: 160rpx;
					}

					.shop_r {
						padding-left: 26rpx;

						.shop_tit {
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
						}
					}

					.status {
						padding: 19rpx 0 17rpx 0;
						font-size: 20rpx;
						font-weight: 400;
						color: #4D4D4D;
					}

					.money {
						display: flex;
						justify-content: space-between;
						width: 540rpx;

						view {
							font-size: 24rpx;
							font-weight: 400;
							color: #808080;
						}

						text {
							font-size: 26rpx;
							font-weight: 400;
							color: #FF1900;
						}
					}
				}
			}

			.allmoney {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 400;
				padding: 26rpx 21rpx;
				margin-top: 2rpx;

				text {
					color: #808080;
				}

				.zong {
					text {
						color: #FF4430;
					}
				}
			}

			.pay {
				margin: 10rpx 0;
				padding: 24rpx 21rpx;
				background-color: #fff;

				.pay_one {
					display: flex;
					align-items: center;
					justify-content: space-between;

					line-height: 68rpx;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #808080;
					}

					.tit {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					.endmoney {
						font-size: 28rpx;
						font-weight: 400;
						color: #000;
					}
				}
			}

			.order {
				padding: 30rpx 21rpx;
				background-color: #fff;

				.order_tit {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF2400;
					line-height: 68rpx;
				}

				.order_one {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 68rpx;

					.ends {
						padding-left: 80rpx;
					}
				}
			}

		}
	}
</style>
